<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <div style="display: flex;justify-content: center;text-align: center">
        <div class="block" style="flex:1">
          <span class="demonstration">默认不区分颜色</span>
          <sdn-rate v-model="value1"></sdn-rate>
        </div>
        <div class="block" style="flex:1">
          <span class="demonstration">区分颜色</span>
          <sdn-rate v-model="value2" :colors="colors"></sdn-rate>
        </div>
      </div>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      value1: null,
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    }
  },
  setup() {
    const btnDesc = {
      title: "Rate 评分",
      describe: "评分组件",
      codeBlock: `<div class="block" style="flex:1">
          <span class="demonstration">默认不区分颜色</span>
          <sdn-rate v-model="value1"></sdn-rate>
        </div>
        <div class="block" style="flex:1">
          <span class="demonstration">区分颜色</span>
          <sdn-rate v-model="value2" :colors="colors"></sdn-rate>
        </div>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "number",
          "emun": "—",
          "default": "0"
        }, {"name": "max", "describe": "最大分值", "type": "number", "emun": "—", "default": "5"}, {
          "name": "disabled",
          "describe": "是否为只读",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "allow-half",
          "describe": "是否允许半选",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "low-threshold",
          "describe": "低分和中等分数的界限值，值本身被划分在低分中",
          "type": "number",
          "emun": "—",
          "default": "2"
        }, {
          "name": "high-threshold",
          "describe": "高分和中等分数的界限值，值本身被划分在高分中",
          "type": "number",
          "emun": "—",
          "default": "4"
        }, {
          "name": "colors",
          "describe": "icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色",
          "type": "array/object",
          "emun": "—",
          "default": "['#F7BA2A', '#F7BA2A', '#F7BA2A']"
        }, {
          "name": "void-color",
          "describe": "未选中 icon 的颜色",
          "type": "string",
          "emun": "—",
          "default": "#C6D1DE"
        }, {
          "name": "disabled-void-color",
          "describe": "只读时未选中 icon 的颜色",
          "type": "string",
          "emun": "—",
          "default": "#EFF2F7"
        }, {
          "name": "icon-classes",
          "describe": "icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名",
          "type": "array/object",
          "emun": "—",
          "default": "['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']"
        }, {
          "name": "void-icon-class",
          "describe": "未选中 icon 的类名",
          "type": "string",
          "emun": "—",
          "default": "el-icon-star-off"
        }, {
          "name": "disabled-void-icon-class",
          "describe": "只读时未选中 icon 的类名",
          "type": "string",
          "emun": "—",
          "default": "el-icon-star-on"
        }, {
          "name": "show-text",
          "describe": "是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "show-score",
          "describe": "是否显示当前分数，show-score 和 show-text 不能同时为真",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "text-color",
          "describe": "辅助文字的颜色",
          "type": "string",
          "emun": "—",
          "default": "#1F2D3D"
        }, {
          "name": "texts",
          "describe": "辅助文字数组",
          "type": "array",
          "emun": "—",
          "default": "['极差', '失望', '一般', '满意', '惊喜']"
        }, {"name": "score-template", "describe": "分数显示模板", "type": "string", "emun": "—", "default": "{value}"}],
      events: [{"name": "change", "describe": "分值改变时触发", "params": "改变后的分值"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
